<template>
	<!-- 服务器和网络巡检模块 -->
	<view>
		<view class="page_top">
			<view class="page_top_conetnt">
				<image src="@/static/logo/back_icon.png" mode="" class="back_logo" @click="back"></image>
				<text>巡检详情</text>
				
				<text class="submit_text" @click="submit" v-if="form.status==0">提交</text>
			</view>
		</view>
		
		

		<scroll-view scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<customForm v-model="form" :configList="configList" :disabled="form.status==1"></customForm>

			</view>
		</scroll-view>
		
		<view class="footer_box">
			<text>已提交：{{ alreadyNum }}/{{tableList.length}}</text>
			
			<text>{{curIndex}}、{{ form.equipmentName }}</text>
			
			<view class="icon_box" @click="popupBox.visible = true">
				<image src="@/static/logo/menu_icon.png" mode=""></image>
				<text>选择</text>
			</view>
		</view>
		
		<u-popup :show="popupBox.visible" @close="close">
			<scroll-view scroll-y="true" class="popup_scroll_box">
				<view class="popup_scroll_content">
					<view class="content_card" v-for="item in tableList" :key="item.id" @click="setForm(item)">
						<view class="card_title">
							<text>设备名称:{{ item.equipmentName }}</text>
							
							<text class="tip_sty" :class="{'over_sty':item.status=='1'}">{{ item.status=='1'? "已提交":"未提交" }}</text>
						</view>
						<view class="card_content">
							<view class="card_line">
								<text>厂家及型号：{{ item.equipmentNumber }}</text>
							</view>
							<view class="card_line">
								<text>设备位置：{{ item.equipmentLocation }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		
		<u-toast ref="uToastRef"></u-toast>

	</view>
</template>

<script setup>
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import { getServerAndEvtInfoListAPI, getServerAndEvtInfoAPI, updataServerAndEvtInfoAPI, updataServerAndEvtxjfxAPI  } from '@/api/inspestion.js'
	import { nextTick, reactive, toRefs, ref, computed } from "vue";
	
	import customForm from "./componetns/customForm.vue"
	
	const uToastRef = ref(null)
	let loop = false //是否重新请求
	
	const options1 = [
		{ label: "正常", value: '0' },
		{ label: "不正常", value: '1' },
	]
	const options2 = [
		{ label: "是", value: '0' },
		{ label: "否", value: '1' },
	]
	const options3 = [
		{ label: "良好", value: '0' },
		{ label: "偶尔故障", value: '1' },
		{ label: "经常故障", value: '2' },
		{ label: "不可使用", value: '3' },
	]
	const configList = computed(()=>{
		const baseList = [
			{ name:"设备名称", key: "equipmentName", type: "text", placeholder:"请输入设备名称", default:"", disabled: true },
			{ name:"设备厂家及型号", key: "equipmentNumber", type: "text", placeholder:"请输入设备厂家及型号", default:"", disabled: true },
			{ name:"设备位置", key: "equipmentLocation", type: "text", placeholder:"请输入设备位置", default:"", disabled: true },
			{ name:"前面板指示灯", key: "frontLamp", type: "radio", placeholder:"请输入前面板指示灯", default:"", options:options1 },
			{ name:"电源指示灯", key: "powerLamp", type: "radio", placeholder:"请输入电源指示灯", default:"", options:options1 },
			{ name:"风扇运转状态", key: "fan", type: "radio", placeholder:"请输入风扇运转状态", default:"", options:options1 },
			{ name:"网络连接状态", key: "networkConnection", type: "radio", placeholder:"请输入网络连接状态", default:"", options:options1 },
			{ name:"CPU及内存使用情况", key: "cpu", type: "radio", placeholder:"请输入CPU及内存使用情况", default:"", options:options1 },
			{ name:"是否有异常日志", key: "abnormalLog", type: "radio", placeholder:"请输入是否有异常日志", default:"", options:options2 },
			{ name:"总体状况", key: "totality", type: "radio", placeholder:"请输入总体状况", default:"", options:options3 },
		]
		if(alreadyNum.value +1 >= tableList.value.length) {
			return [
				...baseList,
				{ name:"巡检分析", key: "inspectionAnalysis", type: "text", placeholder:"请输入巡检分析", default:"" }
			]
		} else {
			return baseList
		}
		
		if(curType.value == '1') { // 服务器巡检
			return [
				{ name:"设备名称", key: "equipmentName", type: "text", placeholder:"请输入设备名称", default:"" },
				{ name:"设备厂家及型号", key: "equipmentNumber", type: "text", placeholder:"请输入设备厂家及型号", default:"" },
				{ name:"设备位置", key: "equipmentLocation", type: "text", placeholder:"请输入设备位置", default:"" },
				{ name:"前面板指示灯", key: "frontLamp", type: "text", placeholder:"请输入前面板指示灯", default:"" },
				{ name:"电源指示灯", key: "powerLamp", type: "text", placeholder:"请输入电源指示灯", default:"" },
				{ name:"风扇运转状态", key: "fan", type: "text", placeholder:"请输入风扇运转状态", default:"" },
				{ name:"网络连接状态", key: "networkConnection", type: "text", placeholder:"请输入网络连接状态", default:"" },
				{ name:"CPU及内存使用情况", key: "cpu", type: "text", placeholder:"请输入CPU及内存使用情况", default:"" },
				{ name:"是否有异常日志", key: "abnormalLog", type: "text", placeholder:"请输入是否有异常日志", default:"" },
				{ name:"总体状况", key: "totality", type: "text", placeholder:"请输入总体状况", default:"" },
				{ name:"巡检分析", key: "inspectionAnalysis", type: "text", placeholder:"请输入巡检分析", default:"" },
			]
		} else { //网络巡检
			return [
				{ name:"设备名称", key: "equipmentName", type: "text", placeholder:"请输入设备名称", default:"" },
				{ name:"设备厂家及型号", key: "equipmentNumber", type: "text", placeholder:"请输入设备厂家及型号", default:"" },
				{ name:"设备位置", key: "equipmentLocation", type: "text", placeholder:"请输入设备位置", default:"" },
				{ name:"前面板指示灯", key: "frontLamp", type: "text", placeholder:"请输入前面板指示灯", default:"" },
				{ name:"电源指示灯", key: "powerLamp", type: "text", placeholder:"请输入电源指示灯", default:"" },
				{ name:"风扇运转状态", key: "fan", type: "text", placeholder:"请输入风扇运转状态", default:"" },
				{ name:"网络连接状态", key: "networkConnection", type: "text", placeholder:"请输入网络连接状态", default:"" },
				{ name:"CPU及内存使用情况", key: "cpu", type: "text", placeholder:"请输入CPU及内存使用情况", default:"" },
				{ name:"是否有异常日志", key: "abnormalLog", type: "text", placeholder:"请输入是否有异常日志", default:"" },
				{ name:"总体状况", key: "totality", type: "text", placeholder:"请输入总体状况", default:"" },
				{ name:"巡检分析", key: "inspectionAnalysis", type: "text", placeholder:"请输入巡检分析", default:"" },
			]
		}
	})
	const alreadyNum = computed(()=>{
		return (tableList.value.filter(ele=>{ return ele.status=="1" })||[]).length
	})
	const curIndex = computed(()=>{
		let index = tableList.value.findIndex(ele=>{return ele.id==curId.value})
		if(index||index===0) { return index+1 }
		else {
			return null
		}
	})
	const popupBox = reactive({
		visible: false
	})
	
	const data = reactive({
		pageId: "", //列表的外层id
		curId: "", //当前选择的选项id
		curType: "",
		form: {},
		tableList: []
	})
	const { pageId, curId, curType,form, tableList } = toRefs(data)


	async function getList() {
		const res = await getServerAndEvtInfoListAPI(pageId.value)
		
		if(res.code == 200) {
			if(curType.value=='1'){
				tableList.value = res.data.networkVos||[]	
			} else {
				tableList.value = res.data.serverStorageVos||[]
			}
			let a = tableList.value.find(ele=>{ return ele.status == 0 })
			if(a) {
				curId.value = a.id
			} else {
				if(tableList.value.length > 0) {
					curId.value = tableList.value[0].id
				}
			}
			
			if(curId.value) {
				getFormInfo()
			}
		}
	}
	
	const getFormInfo = async () => {
		const res = await getServerAndEvtInfoAPI(curId.value, curType.value)
		console.log("获取到的表单详情", res)
		if(res.code != 200) return;
		form.value = {...res.data}
	}
	
	function close() {
		popupBox.visible = false
	}

	
	/** 提交当前表单 */
	async function submit() {
		try{
			configList.value.forEach(config=>{
				if(!form.value[config.key]) {
					throw new Error(`${config.name}未填写`)
				}
			})
		}catch(e){
			//TODO handle the exception
			uToastRef.value.show({
				type: 'warning',
				message: e.message
			})
			return
		}
		let inspectionAnalysis = ""
		let submitAll = alreadyNum.value + 1 >= tableList.value.length
		if(submitAll) {
			inspectionAnalysis = form.value.inspectionAnalysis
		} 
		const res = await updataServerAndEvtInfoAPI(form.value, curType.value)
		if(res.code == 200) {
			form.value.status = "1"
			autoChange()
			if(!submitAll) {
				uToastRef.value.show({
					type: 'success',
					message: "提交成功"
				})
			} else {
				submitAllForm(inspectionAnalysis)
			}
			
		}
	}
	
	async function submitAllForm(text) {
		const res = await updataServerAndEvtxjfxAPI({
			isnId: pageId.value,
			inspectionAnalysis: text
		}, curType.value)
		if(res.code == 200) {
			uToastRef.value.show({
				type: 'success',
				message: "提交成功"
			})
			loop = true
		}
	}
	
	/** 自动切换下一个 */
	function autoChange() {
		let curChange = false //当前表单提交状态是否改变
		for(let i = 0; i < tableList.value.length; i++) {
			let ele = tableList.value[i]
			if(ele.id == curId.value) {
				ele.status = '1'
				curChange = true
			}
			if(curChange&&ele.status == '0') {
				curId.value = ele.id
				getFormInfo()
				return
			}
		}
		let a = tableList.value.find(ele=>{return ele.status=='0'})
		if(a) {
			curId.value = a.id
		}
		if(curId.value) {
			getFormInfo()
		}
	}

	function setForm(item) {
		curId.value = item.id
		popupBox.visible = false
		getFormInfo()
	}

	function back() {
		uni.navigateBack(-1)
	}
	
	onLoad(async (options) => {
		/* inspecType  0 基础环境  1网络  2服务器 */
		curType.value = options.type
		pageId.value = options.id
		getList()
	})
	
	onShow(()=>{
		uni.setStorageSync("reget", true)
	})
</script>

<style scoped lang="scss">
	.page_top {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		padding-top: var(--status-bar-height);
		background-color: #f8f8f8;
		position: relative;

		.page_top_conetnt {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			position: relative;
		}

		.back_logo {
			--back-img-size: 40rpx;
			width: var(--back-img-size);
			height: var(--back-img-size);
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
		}

		.submit_text {
			position: absolute;
			right: 30rpx;
			color: $uni-color-primary;
			font-size: 24rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.scroll_box {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx);
		.scroll_content {
			padding: 30rpx;
		}
	}
	
	.footer_box {
		width: 100%;
		height: 88rpx;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 24rpx;
		.icon_box {
			display: flex;
			align-items: center;
			--img-logo-size: 38rpx;
			image {
				width: var(--img-logo-size);
				height: var(--img-logo-size);
				margin-right: 12rpx;
			}
		}
	}
	
	.popup_scroll_box {
		width: 100%;
		height: 80vh;
		.popup_scroll_content {
			min-height: 100%;
			width: 100%;
			background-color: #f8f8f8;
			padding: 30rpx;
		}
		.content_card {
			width: 100%;
			min-height: 80rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			border-radius: 12rpx;
			.card_title {
				width: 100%;
				padding: 24rpx 0;
				border-bottom: 1px solid $uni-color-border;
				display: flex;
				align-items: center;
				position: relative;
				justify-content: space-between;
				.tip_sty {
					font-size: 24rpx;
					color: $uni-color-error;
				}
				.over_sty {
					color: $uni-color-success;
				}
			}
			.card_content {
				font-size: 24rpx;
				padding: 12rpx;
				.card_line {
					display: flex;
					align-items: center;
					padding: 12rpx;
				}
			}
		}
	}
</style>